<template>
	<view>
		<view class="mapParent" style="height: 100%; width: 100%;">
			<!-- <map :scale="scale" style="width: 100%; height: 100%;" enable-3D="false" show-compass="false"
				enable-overlooking="false" :enable-satellite="false" :enable-traffic="false" show-location="false"
				:latitude="latitude" :longitude="longitude" :markers="covers">
			</map> -->
			<map class="map" ref="map" id="map" style="width: 100%;" :style="'height:' + windowHeight * 2 + 'rpx'"
				:latitude="latitude" :longitude="longitude" :markers="covers" :enable-zoom="true" :enable-rotate="true"
				:show-location="true">
				<cover-view class="icon-container">
					<cover-image src="/static/images/account.png" @click="ctrlCenter()"></cover-image>
					<cover-image src="/static/images/my_location.png" @click="position()"></cover-image>
				</cover-view>
				<cover-view class="btn-container" @click="saoma()">
					<cover-view>扫码骑车</cover-view>
				</cover-view>
			</map>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				address: '',
				// 长沙师范学院经纬度
				latitude: 28.256388,
				longitude: 113.083876,
				covers: [{
						id: 1,
						latitude: 28.256388,
						longitude: 113.083876,
						iconPath: '/static/images/car.png',
						height: 30,
						width: 40
					},
					{
						id: 2,
						latitude: 28.256388,
						longitude: 113.086086,
						iconPath: '/static/images/car.png',
						height: 30,
						width: 40
					}
				],
				windowHeight: uni.getSystemInfoSync().windowHeight,
			}
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		onReady() {
			this.map = uni.createMapContext("map", this)
		},
		methods: {

			dateFormat(value) {
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				//var year = date.getFullYear();
				//var month = ("0" + (date.getMonth() + 1)).slice(-2);
				//var sdate = ("0" + date.getDate()).slice(-2);
				// var hour = ("0" + date.getHours()).slice(-2);
				//console.log(date.getMinutes())
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = minute + ":" + second;
				// 返回

				return result;
			},
			saoma() {
				// if (this.isLogin == 1 && store.state.user.status == 1) {
				// 	uni.scanCode({
				// 		scanType: ['qrCode'],
				// 		success: function(res) {
				// 			// console.log(res)
				// 			console.log(res.result)
				// 			let date = new Date().getTime()
				// 			console.log(date);
				// 			store.commit("setSTime", date)
				// 			store.commit("setUseCarId", res.result)
				// 			store.commit("setUserUse", 1)
				// 			uni.showToast({
				// 				title: '借车成功'
				// 			})
				// 		}
				// 	})
				// } else if (this.isLogin == 0) {
				// 	uni.navigateTo({
				// 		url: '../login/login'
				// 	})
				// } else if (this.userStatus == 0) {
				// 	uni.showToast({
				// 		title: '用户不合法',
				// 		icon: 'error'
				// 	})
				// }
			},
			position() {
				this.map.moveToLocation({
					latitude: 28.256388,
					longitude: 113.083876
				})
			},
			ctrlCenter() {
				if (this.isLogin == 1) {
					uni.navigateTo({
						url: '../control/control'
					})
				} else if (this.isLogin == 0) {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			}
		},
		computed: {
			isLogin() {
				return store.state.isLogin
			},
			userStatus() {
				return store.state.user.status
			}
		},
		watch: {
			isLogin: {
				deep: true,
				handler(newval, oldval) {
					store.state.isLogin = newval
				}
			},
			userStatus: {
				deep: true,
				handler(newval, oldval) {
					store.state.user.status = newval
				}
			}
		}
	}
</script>

<style>
	.mapParent {
		width: 100%;
		height: 100%;
	}

	.btn-container {
		position: absolute;
		width: 600rpx;
		color: #fff;
		margin-left: 75rpx;
		top: 80%;
		height: 70rpx;
		display: flex;
		text-align: center;
		/* line-height: 75rpx; */
		justify-content: center;
		align-items: center;
		opacity: .7;
		background-color: gray;
		border-radius: 100px;
	}

	.icon-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 87rpx;
		margin-top: 30rpx;
		height: 156rpx;
		opacity: .6;
	}

	.icon-container cover-image {
		width: 60rpx;
		height: 60rpx;
	}
</style>
